<!DOCTYPE html>
<html>
  <head>
    <title>PhiloGL - Quaternion Julia Set</title>
    <link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" media="all" type="text/css" href="style.css" />
    <script type="text/javascript" src="../../build/PhiloGL.js"></script>
    <script type="text/javascript" src="index.js"></script>
  </head>
  <body onload="init();">
    <div id="container">
      
      <div id="title">
        <h1>Quaternion Julia Set</h1>
      </div>
      
      <div class="controls">
        100% Fragment Shader generated Quaterion Julia Set using Ray Marching.
        <table>
          <tr>
            <td>Precision:</td>
            <td>
              Max. Iterations <input id="maxIterations" type="number" value="8" step="1" /> 
              Epsilon <input id="epsilon" type="number" value="0.006" step="0.001" /> 
            </td>
          </tr>
          <tr>
            <td>Display:</td>
            <td>
              Animate <input id="animate" type="checkbox" checked /> | 
              Shadows <input id="shadows" type="checkbox" checked /> | 
              Background Color R 
              <select id="scolorR">
                <option selected>0.0</option>
                <option>0.1</option>
                <option>0.2</option>
                <option>0.3</option>
                <option>0.4</option>
                <option>0.5</option>
                <option>0.6</option>
                <option>0.7</option>
                <option>0.8</option>
                <option>0.9</option>
                <option>1.0</option>
              </select>
              G 
              <select id="scolorG">
                <option selected>0.0</option>
                <option>0.1</option>
                <option>0.2</option>
                <option>0.3</option>
                <option>0.4</option>
                <option>0.5</option>
                <option>0.6</option>
                <option>0.7</option>
                <option>0.8</option>
                <option>0.9</option>
                <option>1.0</option>
              </select>
              B
              <select id="scolorB">
                <option selected>0.0</option>
                <option>0.1</option>
                <option>0.2</option>
                <option>0.3</option>
                <option>0.4</option>
                <option>0.5</option>
                <option>0.6</option>
                <option>0.7</option>
                <option>0.8</option>
                <option>0.9</option>
                <option>1.0</option>
              </select>
            </td>
          </tr>
        </table>
      </div>

      <div id="canvas-container">
        
        <div id="panel1" class="panel" style="display:none;">
          <div id="pointer1" class="pointer"></div>
        </div>
        
        <div id="panel2" class="panel" style="display:none;">
          <div id="pointer2" class="pointer"></div>
        </div>

        <canvas id="canvas" width="900" height="450" style="background-color:black;"></canvas>
      </div>

      <div class="footer">
        Author: <a href="http://blog.thejit.org/">Nicolas Garcia Belmonte</a> - Adapted from <a href="http://www.cs.caltech.edu/~keenan/">Keenan Crane's</a> implementation.
      </div>

    </div>
    
    <div id="fallback" class="fallback"></div>

  <script>
    if (!PhiloGL.hasWebGL()) {
      document.body.className = 'no-webgl';
      document.getElementById('fallback').innerHTML = ''
        +  '<div style="margin:10px;">'
        +   'Your browser (or hardware) does not support WebGL. Go <a href="http://get.webgl.org">here</a> to find more information.'
        +  '</div>'
        +  '<iframe width="480" height="390" src="http://www.youtube.com/embed/ELbYO_GnjqM?rel=0" frameborder="0" allowfullscreen></iframe>';
    }
  </script>
  </body>
</html>
